<template>
  <div class="vux-1px-b flex-row houseList flex-y-center">
    <div class="flex-grow-0 indexImgPath">
      <img class="img" v-lazy="item.IndexImagePath" alt="">
    </div>
    <div class="flex-grow-1">
      <div class="item-info-box">
        <p class="item-title">{{item.Community}}</p>
        <p class="item-desc">{{item.jifang}} <span style="font-size: .26rem">/</span> {{item.AreaStr}}</p>
        <p class="item-desc1">{{item.zhungxiu_type}} <span style="font-size:.26rem">/</span> 整租 <span
                style="font-size:.26rem">/</span> 季付</p>
      </div>
    </div>
    <div class="flex-grow-1 flex-right">
      <div>
        <p class="totalPrice">￥ 1300元/月</p>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "RentingHouseList",
    props: {
      item: {
        type: Object,
        default: {}
      }
    }
  }
</script>

<style lang="less" scoped>
  .houseList {
    padding: 10px;
    .indexImgPath {
      width: 2rem;
      height: 1.5rem;
      position: relative;
      overflow: hidden;
      border-radius: 5px;
      img {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
    }
    .item-info-box {
      padding-left: 10px;
    }
    .item-title {
      font-size: 15px;
      font-weight: 700;
      color: #333;
    }
    .item-desc {
      font-size: .24rem;
      color: #777;
    }
    .item-desc1 {
      font-size: .24rem;
      color: #777;
    }
    .totalPrice {
      font-size: 15px;
      color: #ef2520;
    }
  }

</style>